<?php
/**
 * 公司发展历程组件
 * 显示公司从创立至今的重要里程碑事件
 * 支持时间线和网格两种显示方式
 */

// 组件配置键名
$configKey = 'company-history';

// 文本配置
$texts = [
    'section_pretitle' => '发展历程',
    'section_title' => '我们的成长故事',
    'section_subtitle' => '从创立至今，每一步都凝聚着团队的努力与客户的信任'
];

// 默认配置
$defaultConfig = [
    'section_id' => 'company-history',
    'section_pretitle' => $texts['section_pretitle'],
    'section_title' => $texts['section_title'],
    'section_subtitle' => $texts['section_subtitle'],
    'layout' => 'timeline', // timeline 或 grid
    'timeline_direction' => 'vertical', // vertical 或 horizontal
    'bg_color' => 'white',
    'accent_color' => 'blue-600',
    'show_years' => true,
    'milestones' => [],
    'texts' => $texts
];

// 获取传入配置
$customConfig = $pageConfig['components'][$configKey] ?? [];

// 合并配置
$data = array_merge($defaultConfig, $customConfig);

// 处理样式类
$bgClass = "bg-{$data['bg_color']}";
$accentClass = "text-{$data['accent_color']}";
$borderAccentClass = "border-{$data['accent_color']}";

// 时间线布局类
$timelineClasses = [
    'vertical' => 'relative pl-8 md:pl-0 md:border-l border-gray-200 ml-4 md:ml-0',
    'horizontal' => 'relative flex flex-col md:flex-row overflow-x-auto pb-8 md:pb-0'
];
$timelineClass = $timelineClasses[$data['timeline_direction']] ?? $timelineClasses['vertical'];

// 里程碑项目类
$milestoneItemClasses = [
    'vertical' => 'relative mb-12 md:ml-8 last:mb-0',
    'horizontal' => 'flex-shrink-0 w-full md:w-1/3 md:px-6 mb-8 md:mb-0 last:pr-0'
];
$milestoneItemClass = $milestoneItemClasses[$data['timeline_direction']] ?? $milestoneItemClasses['vertical'];

// 时间点标记类
$markerClasses = [
    'vertical' => 'absolute left-0 md:left-0 top-1 -translate-x-1/2 md:-translate-x-1/2 w-4 h-4 rounded-full bg-white border-2 ' . $borderAccentClass,
    'horizontal' => 'hidden md:block absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-white border-2 ' . $borderAccentClass
];
$markerClass = $markerClasses[$data['timeline_direction']] ?? $markerClasses['vertical'];
?>

<!-- 公司发展历程区域 -->
<section class="py-20" id="<?= htmlspecialchars($data['section_id']); ?>">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题 -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="inline-block text-sm font-semibold <?= $accentClass; ?> uppercase tracking-wider mb-2">
                    <?= htmlspecialchars($data['section_pretitle']); ?>
                </span>
            <?php endif; ?>
            
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                <?= htmlspecialchars($data['section_title']); ?>
            </h2>
            
            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg text-gray-600">
                    <?= htmlspecialchars($data['section_subtitle']); ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- 历程内容容器 -->
        <?php if (!empty($data['milestones'])): ?>
            <?php if ($data['layout'] === 'grid'): ?>
                <!-- 网格布局 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php foreach ($data['milestones'] as $milestone): ?>
                        <?php include 'history-milestone.php'; ?>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <!-- 时间线布局 -->
                <div class="<?= $timelineClass; ?>">
                    <!-- 水平时间线连接线 -->
                    <?php if ($data['timeline_direction'] === 'horizontal'): ?>
                        <div class="hidden md:block absolute top-0 left-0 w-full h-0.5 bg-gray-200"></div>
                    <?php endif; ?>
                    
                    <?php foreach ($data['milestones'] as $index => $milestone): ?>
                        <div class="<?= $milestoneItemClass; ?>">
                            <!-- 时间点标记 -->
                            <div class="<?= $markerClass; ?>"></div>
                            
                            <?php include 'history-milestone.php'; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</section>
    